import React from "react";
import PropTypes from "prop-types";
import { mid2Url } from "@ali/ding-mediaid";

import Avatar from "../../components/Avatar/index";

// utils
import { openLink } from "../../utils/dingtalk.js";

function dayDiff(dayFrom, dayTo) {
  return dayTo - dayFrom;
}
function formatDate(date, day) {
  if (!date || !day) return;

  const ymd = date.split("-");

  const month = ymd[1];

  const dayTo = ymd[2];

  const diff = dayDiff(day, dayTo);
  if (diff === 1) {
    return "昨天";
  } else if (diff === 0) {
    return "今天";
  } else if (diff === -1) {
    return "明天";
  }

  return `${month}月${day}日`;
}
const Profile = ({
  avatar,
  name,
  dept,
  children,
  day,
  delay,
  date,
  transAfterDeptName,
  userId,
  hrmScheduleContent = {}
}) => (
  <div className="todo-profile">
    <div className={`todo-profile-date${delay ? "-delay" : ""}`}>
      {date &&
      day && (
        <span className="todo-profile-day-text">
          {formatDate(date.format("yyyy-MM-dd"), day)}
        </span>
      )}

      {delay && (
        <span className="todo-profile-delay">
          {delay !== "0" ? `超期${delay}天` : ""}
        </span>
      )}
    </div>
    <div
      className="todo-profile-container"
      onClick={() => {
        window._rlog(`_todoList_profile`);
        openLink(`?userId=${userId}#growth`);
      }}
    >
      <Avatar
        name={name}
        size=""
        fontSize={28}
        width={66}
        avatar={avatar && mid2Url(avatar, { imageSize: "thumb" })}
        className="todo-avatar"
        font=""
      />
      <div className="todo-profile-desc">
        <div className="todo-profile-name">{name}</div>

        <div className="todo-profile-dept">
          {transAfterDeptName ? `${transAfterDeptName} 转到 ` : ""}
          {dept || "未分配部门"}
        </div>
      </div>
    </div>

    <div className="todo-profile-status">
      {hrmScheduleContent.remindFlag && <span>已提醒</span>}
      {hrmScheduleContent.approvalFlag && <span>审批中</span>}
      {hrmScheduleContent.interviewFlag && <span>已预约</span>}
    </div>
  </div>
);

Profile.propTypes = {
  avatar: PropTypes.string,
  name: PropTypes.string,
  dept: PropTypes.string,
  children: PropTypes.any,
  day: PropTypes.string,
  delay: PropTypes.string,
  transAfterDeptName: PropTypes.string,
  date: PropTypes.string,
  userId: PropTypes.string,
  hrmScheduleContent: PropTypes.object
};
export default Profile;
